import React from 'react'
import { getRestItems } from '@/api/hero'
import { useHeroCategories } from '@/hooks/heroInfo'
import { Select, Input } from 'antd'
import { connect } from 'umi'

const { Option } = Select

type Props = {
    title: string,
    hero: any,
    action: string,
    dispatch: any
}

function EquipSkill({ title, hero, action, dispatch }: Props) {
    const { heroCategories } = useHeroCategories(getRestItems)

    function handleChange(val: any) {
        dispatch({ type: "hero/setProps", recommend: action, prop: "equipment", val })
    }
    return (
        <div>
            <div className='banner_flex mt15'>
                <span>{title}出装</span>
                <Select
                    mode="multiple"
                    allowClear
                    style={{ width: '100%' }}
                    placeholder={`请选择${title}出装`}
                    defaultValue={[]}
                    onChange={handleChange}
                >
                    {
                        heroCategories.map((item: any) => {
                            return <Option key={item._id}>
                                {item.name}
                            </Option>
                        })
                    }
                </Select>
            </div>

            <div className='banner_flex mt15'>
                <span>{title}技巧</span>
                <Input.TextArea placeholder={`请输入${title}技巧`}
                    value={hero[action].tips}
                    onChange={(ev) => {
                        dispatch({ type: "hero/setProps", recommend: action, prop: "tips", val: ev.target.value })
                    }}
                ></Input.TextArea>
            </div>
        </div>
    )
}

const mapStateToProps = (state: any) => {
    const { hero } = state
    return {
        hero
    }
}

export default connect(mapStateToProps)(EquipSkill)